<script>
import { getPosts, getComment } from "../assets/api/info.js";
import { onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";

export default {
  setup() {
    let route = useRoute();

    const list = reactive({
      infoList: [], // 资讯数据
      tid: route.query.id, // 获取传参id
      commentList: [], // 评论数据
      comment_value: "", // 评论内容
      infoLists: [], // 资讯数据
      commentLists: [], // 评论数据
    });
    // 点赞
    function Like(item) {
      item.is_liked += 1;
      item.quote = 1;
    }
    // 取消点赞
    function noLike(item) {
      item.is_liked -= 1;
      item.quote = null;
    }
    onMounted(() => {
      // 修改body背景
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f2f2f2;");
      // 自己发布的评论id
      if (list.tid > 100) {
        // 获取帖子数据
        getPosts({ tid: list.tid }).then((data) => {
          list.infoList = data;
        });
        // 获取评论数据
        getComment({ tid: list.tid }).then((data) => {
          if (window.localStorage.getItem("myComment")) {
            list.commentLists = JSON.parse(localStorage.getItem("Comments"));
            list.commentList = list.commentLists.filter(
              (item) => list.tid == item.id
            );
            for (var i = 0; i < data.length; i++) {
              list.commentList.push(data[i]);
            }
          } else {
            list.commentList = data;
          }
        });
      } else {
        if (window.localStorage.getItem("myComment")) {
          list.infoLists = JSON.parse(localStorage.getItem("myComment"));
          list.commentLists = JSON.parse(localStorage.getItem("Comments"));
          list.commentList = list.commentLists.filter(
            (item) => list.tid == item.id
          );
          list.infoList = list.infoLists.filter((item) => list.tid == item.id);
          list.infoList = list.infoList[0];
        }
      }

      // if(list.tid = null){
      //   list.infoList =
      // }
    });
    // 日期转换
    function timeago(stringTime) {
      //dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var month = day * 30;
      var time1 = new Date().getTime(); //当前的时间戳
      var time2 = Date.parse(new Date(stringTime)); //指定时间的时间戳
      var time = time1 - time2;

      var result = null;
      if (time < 0) {
        alert("设置的时间不能早于当前时间！");
      } else if (time / month >= 1) {
        result = "" + parseInt(time / month) + "月前";
      } else if (time / week >= 1) {
        result = "" + parseInt(time / week) + "周前";
      } else if (time / day >= 1) {
        result = "" + parseInt(time / day) + "天前";
      } else if (time / hour >= 1) {
        result = "" + parseInt(time / hour) + "小时前";
      } else if (time / minute >= 1) {
        result = "" + parseInt(time / minute) + "分钟前";
      } else {
        result = "刚刚发布！";
      }
      return result;
    }
    //添加评论
    let add_comment = () => {
      // console.log(Date.now());
      list.commentList.unshift({
        content: list.comment_value,
        id: list.tid,
        is_admin: 0,
        is_anchor: 0,
        is_liked: 0,
        is_owner: 0,
        like_count: 0,
        nickname: "中分背带裤",
        publish_time: new Date().getTime() / 1000,
        quote: null,
        quote_id: 0,
        quote_reply_id: 0,
        reply_count: 0,
        tid: list.tid,
        user_id: 25528388,
      });
      window.localStorage.setItem("Comments", JSON.stringify(list.commentList));
      list.comment_value = "";
    };
    //点赞的评论数量
    function num() {
      return list.commentList.reduce((total, item) => {
        if (item.quote == 1) {
          return (total += 1);
        }
        return total;
      }, 0);
    }
    return {
      ...toRefs(list),
      timeago,
      Like,
      noLike,
      add_comment,
      num,
    };
  },
};
</script>
<template>
  <div class="container">
    <div class="nav-in">
      <div class="nav-back">
        <a href="javascript:;" @click="$router.go(-1)">
          <i class="iconfont icon-zuobian"></i>
        </a>
      </div>
      <div class="nav-title">社区</div>
    </div>

    <div class="home">
      <div class="home-pg">
        <div class="row">
          <div class="head">
            <div class="title">{{ infoList.title }}</div>
            <div class="img-box">
              <div class="left">
                <img :src="infoList.zone_image" alt="" />
                <div class="auther">
                  <div class="name">{{ infoList.nickname }}</div>
                  <div class="time">
                    {{ timeago(infoList.publish_time * 1000) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            {{ infoList.content }}
          </div>
          <div>
            <img
              v-for="(item, index) in infoList.images"
              :key="index"
              :src="item.url"
              style="width: 355px; margin-top: 20px"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="pl-video">
      <div class="hd">
        <span>最新评论</span>
      </div>
      <div class="bd">
        <div class="nothing" v-if="commentList.length == 0">
          评论为空，你先来一发吧~
        </div>
        <div class="plcon">
          <div class="content">
            <ul class="pl-list">
              <li v-for="item in commentList" :key="item.id">
                <img
                  src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg"
                  alt=""
                />
                <div class="text">
                  <div class="top">
                    <div class="name">{{ item.nickname }}</div>
                    <div class="good">
                      {{ item.is_liked }}
                      <i
                        class="iconfont icon-appreciate_fill_light con"
                        v-if="item.quote == 1"
                        @click="noLike(item)"
                      ></i>

                      <i
                        class="iconfont icon-appreciate_light"
                        v-if="item.quote == null"
                        @click="Like(item)"
                      ></i>
                    </div>
                  </div>
                  <div class="time">
                    {{ timeago(item.publish_time * 1000) }}
                  </div>
                  <div class="cont">{{ item.content }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="app">
      <div class="title">
        <input
          type="text"
          placeholder="发表评论参与互动"
          v-model="comment_value"
          @keydown.enter="add_comment"
        />
      </div>
      <div class="option">
        <div class="zan">
          <i class="iconfont icon-appreciate_light"></i>
          <div class="red-zan">{{ num() }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
// 评论 
.plcon {
  padding: 10px 14px 0;
  .content {
    width: 100%;

    .pl-list {
      width: 100%;

      li {
        display: flex;
        border-bottom: 1px solid #f4f4f4;
        width: 100%;
        margin-bottom: 16px;

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
        .text {
          margin-left: 10px;
          width: 100%;
          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .name {
              color: #ababab;
              font-size: 14px;
              margin-bottom: 4px;
            }
            .good {
              font-size: 10px;
              color: #ababab;
              .iconfont {
                margin-left: 4px;
                font-size: 14px;
              }
            }
          }

          .time {
            font-size: 10px;
            color: #ababab;
            margin-bottom: 8px;
          }
          .cont {
            display: flex;
            align-items: center;
            color: #000;
            font-size: 12px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}
.nav-in {
  height: 45px;
  line-height: 45px;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  z-index: 999;
  max-width: 750px;
  justify-content: flex-start;
  background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
  .nav-back {
    .iconfont {
      color: #fff;
    }
  }
  .nav-title {
    font-size: 18px;
    font-weight: 700;
    margin-left: 10px;
  }
}

.home {
  margin-bottom: 10px;
  .home-pg {
    .row {
      margin-bottom: 10px;
      padding: 15px 12px 5px;
      background: #fff;
      .head {
        padding: 30px 0 0;
        font-size: 19px;
        color: #333;
        .title {
          width: 355px;
          color: #2e2e2e;
          font-size: 16px;
          font-weight: 700;
          height: 40px;
          line-height: 40px;
          margin-bottom: 6px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .img-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            align-items: center;
          }
          img {
            width: 43px;
            height: 43px;
            border-radius: 100%;
          }
          .auther {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
          }
          .time {
            font-size: 10px;
            color: #c9c9c9;
          }
          .name {
            font-size: 14px;
            color: #383838;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .content {
        margin: 15px 0 10px;
        line-height: 20px;
        font-size: 14px;
        color: #242629;
        word-break: break-all;
      }
      .img {
        img {
          width: 100%;
        }
      }
    }
  }
}
.pl-video {
  background: #fff;
  margin-top: 8px;
  .hd {
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
    span {
      font-size: 14px;
      color: #242629;
      font-weight: 700;
    }
  }
  .bd {
    padding-bottom: 50px;
    background: #f2f2f2;
    .nothing {
      width: 100%;
      height: 200px;
      line-height: 200px;
      background: #f2f2f2;
      font-size: 16px;
      color: #999;
      text-align: center;
    }
  }
}
.app {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: calc(13px / 2) 20px calc(13px / 2) 12px;
  border-top: 1px solid #ededf3;
  height: 49px;
  max-width: 750px;
  min-width: 375px;
  line-height: 49px;
  background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
  font-size: 14px;
  color: #242629;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  .title {
    width: calc(100% - 50px);

    height: 36px;
    line-height: 36px;
    background: #f7f7f9;
    border-radius: 40px;
    font-size: 14px;
    color: #999;
    input {
      height: 36px;
      padding-left: 14px;

      padding-right: 14px;
      width: 100%;
      background: #f7f7f9;
      border-radius: 40px;
      font-size: 14px;
      color: #999;
      border: none;
      outline: none;
    }
  }
  .option {
    margin-top: 6px;
    height: 24px;
    line-height: 24px;
    display: flex;
    .iconfont {
      font-size: 22px;
      color: #fff;
    }
    .com {
      position: relative;
      height: 24px;
      .red-com {
        position: absolute;
        top: -4px;
        left: 16px;
        width: 100%;
        height: 14px;
        line-height: 14px;
        border-radius: 10px;
        background: #da4136;
        font-size: 12px;
        color: #fff;
        text-align: center;
        font-style: normal;
      }
    }
    .zan {
      position: relative;
      margin-left: 12px;
      height: 24px;
      .red-zan {
        position: absolute;
        top: -4px;
        left: 14px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        border-radius: 100%;
        background: #da4136;
        font-size: 12px;
        color: #fff;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
.con {
  color: #da4136;
}
</style>
